<template>
  <a-modal
    class="webkit-model"
    v-model="visible"
    title="温馨提示"
    @ok="handleOk"
    :footer="null"
  >
    <h2>为了您更好的使用体验，推荐使用以下浏览器</h2>
    <p class="desc">选任一点击图标即可进入浏览器官方下载页面</p>
    <div class="img-wrap">
      <div
        class="img-wrap-item"
        v-for="item in browserList"
        :key="item.name"
        @click="handleGo(item)"
      >
        <img :src="item.src" alt="">
        <p class="name">{{ item.name }}</p>
      </div>
    </div>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      browserList: [
        { src: require('@/assets/webkit/google.png'), name: 'Google浏览器', href: 'https://www.google.cn/chrome/index.html' },
        { src: require('@/assets/webkit/360.png'), name: '360浏览器', href: 'https://browser.360.cn/se/' },
        { src: require('@/assets/webkit/qq.png'), name: 'QQ浏览器', href: 'https://browser.qq.com/mac/' },
        { src: require('@/assets/webkit/sogou.png'), name: '搜狗浏览器', href: 'https://ie.sogou.com/' }
      ]
    }
  },

  methods: {
    handleOk () {

    },
    handleGo (item) {
      window.open(item.href)
    }
  }
}
</script>

<style scoped lang="less">
.webkit-model {
  /deep/ .ant-modal{
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%)!important;
  }
  /deep/ .ant-modal-mask{
    background-color: rgba(0, 0, 0, 0.6)
  }
  h2{
    font-weight: 500;
    color: #000000;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
  }
  .desc{
    color: #5F677A;
    font-size: 14px;
    text-align: center;
  }
  .img-wrap{
    display: flex;
    justify-content: space-around;
    margin-top:20px;
    .img-wrap-item{
      text-align: center;
      cursor: pointer;
      img{
        width:70px;
        height:70px;
      }
      .name{
        color: #000000;
        font-size: 14px;
        margin-top:7px;
      }
    }
  }
}
</style>
